<template>
	<view class="position-container">
		<scroll-view class="scroll" :scroll-top="0" scroll-y="true" >
			<view class="item" v-for="(item, index) in jobList" :key="item.id" @click="toPage(item.id)">
				<view class="header">
					<text class="name">{{ item.position.name }}</text>
					<uv-tags v-if="item.enableStatus === 1" plain text="招聘中" type="success"></uv-tags>
					<uv-tags v-else plain text="已结束" type="error"></uv-tags>
				</view>
				<view class="info">
					<text>{{ item.experience }}</text>
					<text class="icon"></text>
					<text>{{ item.education }}</text>
					<text class="icon"></text>
					<text>{{ item.salary }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="confirm bottom">
			<navigator url="/pages/job/add"><button class="button">发布新职位</button></navigator>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getCompanyJobList } from '@/apis/job/index.js';

export default {
	data() {
		return {
			jobList: []
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getCompanyJobList(this.userInfo.companyId);
			this.jobList = res.data;
		},
		toPage(id) {
			uni.navigateTo({ url: '/pages/job/add?id=' + id });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.position-container {
	position: relative;
	padding: 0 30rpx;
	.scroll {
		height: calc(100vh - 150rpx);
	}
	.item {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		height: 160rpx;
		border-bottom: 1px solid #ebeef5;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.wrap {
				display: flex;
			}
			.name {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}
		.info {
			display: flex;
			align-items: center;
			.icon {
				height: 26rpx;
				width: 4rpx;
				margin: 0 15rpx;
				background-color: #ccc;
			}
		}
	}
	navigator {
		width: 100%;
	}
}
</style>
